{% extends "StartGroup/groupHome.html" %}

{% block content %}
{% block extra_js %}

<script src="/static_media/contifyuser/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/static_media/datepicker/jquery.ui.core.js" type="text/javascript"></script>
<script src="/static_media/datepicker/jquery.ui.datepicker.js" type="text/javascript"></script>

<script type="text/javascript">

	jQuery.fn.table2CSV = function(options) 
	{
		var options = $.extend
			(
			{
				separator: ',',
				header: [],
				delivery: 'popup' // popup, value
			}, 
				options
			);

		var csvData = [];
		var headerArr = [];
		var el = this;

		//header
		var numCols = options.header.length;
		var tmpRow = []; // construct header avalible array
		
		if (numCols > 0) 
		{
			for (var i = 0; i < numCols; i++) 
			{
				tmpRow[tmpRow.length] = formatData(options.header[i]);
			}
		}
		else 
		{
			$(el).filter(':visible').find('th').each
			(
			function() 
			{
				if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
			}
			);
	    	}

		row2CSV(tmpRow);

		// actual data
		$(el).find('tr').each
		(
		function() 
		{
			var tmpRow = [];
			$(this).filter(':visible').find('td').each
			(
			function() 
			{
				if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
			}
			);
			row2CSV(tmpRow);
		}
		);

		if (options.delivery == 'popup') 
		{
			var mydata = csvData.join('\n');
			return popup(mydata);
		} 
		else 
		{
			var mydata = csvData.join('\n');
			return mydata;
		}

		function row2CSV(tmpRow) 
		{
			var tmp = tmpRow.join('') // to remove any blank rows
			// alert(tmp);
			if (tmpRow.length > 0 && tmp != '') 
			{
				var mystr = tmpRow.join(options.separator);
				csvData[csvData.length] = mystr;
			}
		}

		function formatData(input) 
		{
			// replace " with â€œ
			var regexp = new RegExp(/["]/g);
			var output = input.replace(regexp, "â€œ");
			//HTML
			var regexp = new RegExp(/\<[^\<]+\>/g);
			var output = output.replace(regexp, "");
			if (output == "") 
				return '';

			return '"' + output + '"';
		}
		/*
		function popup(data) 	
		{
			var generator = window.open('', 'csv', 'height=400,width=600');
			generator.document.write('<html><head><title>CSV</title>');
			generator.document.write('</head><body >');
			generator.document.write('<textArea cols=70 rows=15 wrap="off" >');
			generator.document.write(data);
			generator.document.write('</textArea>');
			generator.document.write('</body></html>');
			generator.document.close();
			return true;
		}
		*/
		function popup(data)
		{
			window.location = 'data:text/csv;charset=utf8,' + encodeURIComponent(data);
		}

	/*   
	    function popup(data)
	    {
		  $("body").append('<form id="exportform" action="CsvExport.php" method="post" target="_blank"><input type="hidden" id="exportdata" name="exportdata" /></form>');
		  $("#exportdata").val(data);
		  $("#exportform").submit().remove();
		  return true;
	    }
	*/
	};
          
	$(
	function() 
	{
		$("#delete_transaction").live
		(	'click', 
			function() 
			{
				var array_transaction_ids = [];
				$("#select_checkbox:checked").each
				(
					function() 
					{
						var txn_id = $(this).parent().attr('txn_id');
						array_transaction_ids.push(txn_id);
					}
				);
				$.ajax
				(
					{
						url: '/connectpeople/{{ group.group_web_address }}/ManageMoney/home/',
						type: 'POST',
						data: { 'checked_transaction_ids': array_transaction_ids },
					
						datatype: 'json',
						success: function(json) 
						{
							$("#select_checkbox:checked").each
							(
								function() 
								{
									$(this).parents('tr').remove();
												
									if ( $('#hor-minimalist-a tr').length == 1 )
									{
									
										$('#transaction_sheet, #delete_transaction, #export_id').hide('fast');
									}
								}
							);
						},
						error: function(xhr, ajaxOptions, thrownError) 
						{
							alert("An Error Has Occurred. Please try again.");
						}
					}
				);
				return false;
			}
		);
	}
	);
          
	$(
	function() 
	{
		$('.checkAll').live
		(
			'change', 
			function() 
			{
				$('.cb-element').attr('checked', $(this).is(':checked') ? 'checked' : '');
				$(this).next().text($(this).is(':checked') ? 'Uncheck All' : 'Check All');
			}
		);
	}
	);

	$(          
	function() 
	{
		$('.edit_txn').live
		(
			'click', 
			function() 
			{
				$('#funding_desc_id').val($(this).siblings('.txn_desc_class').html());
				$('#funding_amount_id').val($(this).siblings('.txn_amt_class').html());
				$('#funding_amount_id').val($(this).siblings('.txn_amt_class').html());          
				$('#id_date').val($(this).siblings('.txn_date_class').html());
				$('#see_all_txn').hide('fast');
				$('#fund_id').show('slow');
	  
				return false;
			}
		);
	}
	);
        
	$(
	function() 
	{
		$('#cancel_txn').live
		(
			'click', 
			function() 
			{
				  $('#see_all_txn').show('fast');
				  $('#fund_id').hide('slow');
				  return false;
			}
		);
	}
	);
          
	$(
	function() 
	{
		$('#add_transaction').live
		(
			'click', 
			function() 
			{
				$('#add_sponsor').fadeIn('slow');
				return false;
			}
		);
	}
	);
          
	$(
	function() 
	{
		$('#do_not_add').live
		(
			'click', 
			function() 
			{
				$('#add_sponsor').fadeOut('slow');
				return false;
			}
		);
	}
	);
          
	$(
	function() 
	{
		$('#id_edit_profile_close').live
		(
			'click', 
			function() 
			{
				$('#add_sponsor').fadeOut('slow');
				return false;
			}
		);
	}
	);
          
	$(
	function() 
	{
		$('#add_funding_id').click
		(
			function() 
			{          
				$('#fund_id').show('slow');
				
				if ($('#spend_id').is(":visible")) {
					$('#spend_id').hide('fast');
				}

				if ($('#home').is(":visible")) {
					$('#home').hide('fast');
				}

				$('#see_all_txn').hide('fast');
      			}
		);
	}
	);
          
	$(
	function() 
	{
              $('#add_spending_id').click(function() {
                  $('#spend_id').show('slow');
                  if ($('#fund_id').is(":visible")) {
                      $('#fund_id').hide('fast');
                  }
                  if ($('#home').is(":visible")) {
                      $('#home').hide('fast');
                  }
          
                  $('#see_all_txn').hide('fast');
          
              });
          });
          
	$(
	function() 
	{
              $('#see_all_txn_id').click(function() {
                  $('#home, #spend_id, #fund_id').hide('fast');
                  $('#see_all_txn').show();
              });
          });
          
          $(document).ready(
          
          function() {
              $('#home_id').click(function() {
                  $('#home').show();
                  $('#spend_id, #fund_id, #see_all_txn').hide('fast');
              });
          });
          
          
          $(document).ready(function() {
              $('#nav li').hover(
          
              function() {
                  //show its submenu
                  $('ul', this).slideDown(100);
          
              }, function() {
                  //hide its submenu
                  $('ul', this).slideUp(100);
              });
          });
          
          $(function() {
              $("nav").delegate("a", "click", function() {
                  window.location.hash = $(this).attr("href");
                  return false;
              });
          });    
    
    
</script>
    
    {% endblock %}
    
    {% block extra_css %}
    <link href="/static_media/datepicker/datepicker.css" rel="stylesheet" type="text/css"/>
    <link href="/static_media/datepicker/jquery.ui.theme.css" rel="stylesheet" type="text/css"/>
    <link href="./manage_money.css" rel="stylesheet" type="text/css"/>
    <link href="/{{ media_url }}contifyuser/css/user_profile.css" media="screen, projection" rel="stylesheet" type="text/css"/>    

    
    {% endblock %}
    
    
    <div id='tabs' class= 'ManageMoneyContainer'>
        
        <!--
        <nav>
        <ul class="group">
        <li class="nav-one nav_tab" id="home_id"><a href="#home" class = "current">Home</a></li>
        <li class = "nav-two nav_tab" id="add_funding_id"> <a href="#add_funding">Add Funding</a> </li>
        <li class = "nav-three nav_tab" id="add_spending_id"> <a href="#add_spending">Add Spending</a> </li>
        <li class = "nav-four nav_tab" id="see_all_txn_id"> <a href="#see_all_txn">Transactions</a> </li>
    </ul>
    </nav>
        
        -->
        
        <div class = 'nav'>
            <div class = "nav-one nav_tab" id="home_id"> <a href="#home" class = "current">Home</a></div>
            <div class = "nav-two nav_tab" id="add_funding_id"> <a href="#add_funding">Add Funding</a> </div>
            <div class = "nav-three nav_tab" id="add_spending_id"> <a href="#add_spending">Add Spending</a> </div>
            <div class = "nav-four nav_tab" id="see_all_txn_id"> <a href="#see_all_txn">Transactions</a> </div>
           <div class = "nav-five nav_tab" id="budgets_id"> <a href="#budgets">Budgets</a> </div>
        </div>
        
        <div class = 'div-wrap nobreak clearbreak' >
            <div id = "home">
                <br> 
                <div>Explain Manage Money to ConnectPeople</div>
            </div>
            
            <div id = "see_all_txn" class="hide" style="display:none" >

		<br> <br>
                <div class = "nobreak" >
                    <input type="button" id="add_transaction" class="addButtion" value="Add Funding"/>
		    <input type='button' id='delete_transaction' class="delButton" value='Delete' />
		    <input value="Export as CSV (Excel)" type="button" id = "export_id" onclick="$('#hor-minimalist-a').table2CSV({header:['checkbox', 'date', 'description', 'amount', 'imgedit']})">
                 </div>                
		{% if transactions %}
                                
                
                
                <div id="transaction_sheet" class="nobreak clearbreak">
                
                    <table id="hor-minimalist-a" summary="Transaction Sheet">
                        <thead>
                            <tr>
                                <th scope="col">
                                    <div class='ManageMoneyCheckboxes nobreak'>
                                        <input type='checkbox' name='check_all' class='checkAll' id='transaction-list-selector' />
                                    </div>
                                </th>
                                <th class="heading" scope="col">Date</th>
                                <th class="heading"  scope="col">Description</th>
                                <th class="heading" scope="col">Amount</th>
                            </tr>
                        </thead>
                        {% for transaction in transactions %}
                        <tbody>
                            <tr id = 'tr'>
                                <td>
                                    <div id = 'checkbox_id' txn_id={{transaction.id}}  class='ManageMoneyCheckboxes nobreak'>
                                        <input type="checkbox" id="select_checkbox" class="cb-element">
                                    </div>
                                </td>
                                <td class = 'txn_date_class'>{{transaction.date|date:"m/d/Y"}}</td>
                                <td class = 'txn_desc_class'>{{transaction.description}}</td>
                                <td class = 'txn_amt_class'>{{transaction.amount}}</td>
                                <td class = "edit_txn"><img class="txnEditIcon" title="edit" src="/{{ media_url }}/StartGroup/images/edit-icon.png"/></td>
                            </tr>
                        </tbody>
                        {% endfor %}
                    </table>   
                </div>
                
                {% else %}
		<br> <br>
                <p>There are currently no transactions.</p>
                {% endif %}
            </div>
            
            <div  id = "add_sponsor" class = "addSponsorDiv" style= "display:none">
                <form method = "post" id = "add_sponsor_form" action="/connectpeople/{{ group.group_web_address }}/ManageMoney/add_funding/">
                    <div  class = "sponsor">
                              <div class="sponsorClose">
                                                  <img id="id_edit_profile_close" class="sponsorCloseImg" src="/{{ media_url }}images/close.png"/>
                              </div>
                        
                              <div class = "sponsor_date date_pick" id = 'add_funding_date_id'> {{transaction_form.date.label_tag}}         {{transaction_form.date}} {{ transaction_form.errors.date }}</div>
                              <div class = "sponsor_description" id = 'add_funding_desc_id'>{{transaction_form.description.label_tag}}  {{transaction_form.description}} {{ transaction_form.errors.description }}</div>
                              <div class = "sponsor_amount" id = 'add_funding_amount_id'>{{transaction_form.amount.label_tag}} {{transaction_form.amount}} {{transaction_form.errors.amount}}</div>
                              <div class = "sponsor_category" id = 'add_funding_category_id'>{{transaction_form.category.label_tag}} {{transaction_form.category}}</div>
                              <div class="sponsor_comments"> {{transaction_form.comment.label_tag}} {{transaction_form.comment}}</div>
                              <input type="Submit" value="Submit" />
                              <input type="button" id = 'do_not_add' value="Cancel"/>
                        
                    </div>
                </form>
            </div>
    
            
            <div  id = "add_funding" class = "hide">
                <form method = "post" id = "add_funding_form" action="/connectpeople/{{ group.group_web_address }}/ManageMoney/add_funding/">
                    <div style="display:none" id="fund_id" class = "fund">
                        <br> <br>
                        <div class = "funding_date date_pick" id = 'add_funding_date_id'> {{transaction_form.date.label_tag}}         {{transaction_form.date}} {{ transaction_form.errors.date }}</div>
                        <div class = "funding_description" id = 'add_funding_desc_id'>{{transaction_form.description.label_tag}}  {{transaction_form.description}} {{ transaction_form.errors.description }}</div>
                        <div class = "funding_amount" id = 'add_funding_amount_id'>{{transaction_form.amount.label_tag}} {{transaction_form.amount}} {{transaction_form.errors.amount}}</div>
                        <div class = "funding_category" id = 'add_funding_category_id'>{{transaction_form.category.label_tag}} {{transaction_form.category}}</div>
                        <div class="comments"> {{transaction_form.comment.label_tag}} {{transaction_form.comment}}</div>
                        <input type="Submit" value="Submit" />
                        <input type="button" id = 'cancel_txn' value="Cancel"/>
                        
                    </div>
                </form>
            </div>
         
            <div id = "add_spending" class = "hide">
                <form method = "post" action="">
                    <div style="display:none" id = "spend_id" class = "spend">
                        
                        
                        <div class = "funding_date">
                            Date <input type="text" name="funding_date" />
                        </div>
                        
                        <div class = "funding_description">
                            Description <input type="text" name="funding_description"/>
                        </div>
                        
                        <div class = "funding_amount">
                            Debit <input type="text" name="funding_amount"/>
                        </div>            
                        
                        <div class="comments">
                            Comment
                            <textarea type="text" name="comments" cols ="40" row= "5">Enter your comments here...</textarea>
                        </div>
                        
                        <div class="category">
                            Category
                            <select id="PetType" name="PetType" title="type">
                                <option selected="selected"></option>
                                <option>Dog</option>
                                <select>
                                    <option> humans </option>
                                </select>
                                <option>kutta</option>
                                <option>Cat</option>
                                <option>Bird</option>
                                <option>Lizard</option>
                                <option>Panda</option>
                            </select>
                            
                            <br>
                            <input type="Submit" value="Submit" />
                            
                        </div>
                    </form>
                    </div>
                    
                </div>
                    
                </div>
                    {% endblock %}
